<template>
    <div class="ml-16px mr-16px content-container">
        <Filter :websites="state.websites" @update:data="handleUpdateData" @update:day="handleUpdateDay"></Filter>
        <div class="pl-26px pr-26px pb-26px">
            <InterviewList :data="state.IPUVPVData" />
            <div class="pt-16px pl-26px pr-26px page-container flex flex-center">
                <Pagination v-if="state.IPUVPVData.length > 0" v-model:total="state.page.total"
                    v-model:page="state.page.curPage" v-model:limit="state.page.pageSizes" @pagination="handlePage" />
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import Filter from './components/Filter.vue'
import InterviewList from './components/InterviewList.vue'
import { getInterviewPageApi } from '@/api/sem/index'
import { IRegion, ISite } from '@/api/sem/types'

const state = reactive({
    day: 1,
    startTime: '',
    endTime: '',
    device: 0,
    website: '',
    websites: <ISite[]>[],
    IPUVPVData: <IRegion[]>[],
    page: {
        total: 0,
        curPage: 1,
        limit: 10,
        pageSizes: 10,
    },
})

let params = {
    start: state.day,
    begintime: state.startTime,
    endtime: state.endTime,
    url: state.website,
    equ: state.device,
    pn: state.page.curPage
}

async function getInterviewPage(params: any) {
    state.IPUVPVData = []
    const res: ResType = await getInterviewPageApi(params)
    console.log(res)
    if (res.code == 200) {
        state.IPUVPVData = res.data
        state.websites = res.weburllist
        
        state.page.curPage = res.page as number
        state.page.pageSizes = res.pagesize as number
        state.page.total = res.count
    }
}

async function handleUpdateData(value: any) {
    const { device, endTime, startTime, website } = value
    state.device = device
    state.endTime = endTime
    state.startTime = startTime
    state.website = website
    params = {
        start: state.day,
        begintime: state.startTime,
        endtime: state.endTime,
        url: state.website,
        equ: state.device,
        pn: 1
    }
    getInterviewPage(params)
}

async function handleUpdateDay(value: any){
    const { day } = value
    state.day = day
    state.endTime = ''
    state.startTime = ''
    params = {
        start: state.day,
        begintime: state.startTime,
        endtime: state.endTime,
        url: state.website,
        equ: state.device,
        pn: 1
    }
    getInterviewPage(params)
}


function handlePage(value: any) {
    state.page.curPage = value.page
    state.page.limit = value.limit
    params.pn = value.page
    getInterviewPage(params)
}

onMounted(() => {
    getInterviewPage(params)
})
</script>

<style lang="scss" scoped></style>